// ========================================================================================
//                                   REDEFINE THEME VARIABLE                                 
// ========================================================================================


// ========================================================================================
//                                           LAYOUT
// ========================================================================================
$navbar-height = 70px;                                           // navbar height
$navbar-shrink-height = $navbar-height * 0.72;                   // navbar shrink height
$scroll-progress-bar-height = 2px;                               // scroll progress bar height
$main-content-width = 80%;                                       // main content width (PC)
$main-content-width-tablet = 86%;                                // main content width (tablet)
$main-content-width-mobile = 90%;                                // main content width (mobile)
$post-tool-button-width = 38px;                                  // post tool button width
$spacing-unit = 38px;                                 // component-spacing-value (PC)

// main content max width
$temp-content-max-width = hexo-config('global.content_max_width')
$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
$has-toc-content-max-width = $content-max-width * 1.2


// ========================================================================================
// media query
// ========================================================================================
$media-max-width = 768px;                                 // media query max width (tablet)
$media-max-width-mobile = 640px;                          // media query max width (mobile)

redefine-tablet() {
  @media (max-width $media-max-width){
    {block}
  }
}

redefine-mobile() {
  @media (max-width $media-max-width-mobile){
    {block}
  }
}

// ========================================================================================
// z-index
// ========================================================================================
$z-index-1 = 1001
$z-index-2 = 1002
$z-index-3 = 1003
$z-index-4 = 1004
$z-index-5 = 1005
$z-index-6 = 1006
$z-index-7 = 1007
$z-index-8 = 1008
$z-index-9 = 1009

// ========================================================================================
// note modules colors
// ========================================================================================

$note-default-text-color = #A6A6A6
$note-green-text-color = #006e53
$note-red-text-color = #f85676


// ========================================================================================
// border-radius
// ========================================================================================

$redefine-border-radius-none = 0px
$redefine-border-radius-xsmall = 4px
$redefine-border-radius-xsmall-top = 4px 4px 0px 0px
$redefine-border-radius-xsmall-bottom = 0px 0px 4px 4px
$redefine-border-radius-small = 9px
$redefine-border-radius-small-top = 9px 9px 0px 0px
$redefine-border-radius-small-bottom = 0px 0px 9px 9px
$redefine-border-radius-medium = 14px
$redefine-border-radius-medium-top = 14px 14px 0px 0px
$redefine-border-radius-medium-bottom = 0px 0px 14px 14px
$redefine-border-radius-large = 18px
$redefine-border-radius-large-top = 18px 18px 0px 0px
$redefine-border-radius-large-bottom = 0px 0px 18px 18px
$redefine-border-radius-xlarge = 24px
$redefine-border-radius-xlarge-top = 24px 24px 0px 0px
$redefine-border-radius-xlarge-bottom = 0px 0px 24px 24px
$redefine-border-radius-xxlarge = 48px
$redefine-border-radius-xxlarge-top = 48px 48px 0px 0px
$redefine-border-radius-xxlarge-bottom = 0px 0px 48px 48px
$redefine-border-radius-full = 50%
$redefine-border-radius-full-top = 50% 50% 0px 0px
$redefine-border-radius-full-bottom = 0px 0px 50% 50%

$temp-usr-img-border-radius = hexo-config('articles.style.image_border_radius')
$usr-img-border-radius = $temp-usr-img-border-radius ? convert($temp-usr-img-border-radius) : $redefine-border-radius-medium

// ========================================================================================
// mermaid js theme
// ========================================================================================
$mermaid-theme = hexo-config('mermaid.theme.light')
$dark-mermaid-theme = hexo-config('mermaid.theme.dark')


// ========================================================================================
// color
// ========================================================================================
// primary color
$temp-color = hexo-config('colors.primary')
$primary-color = $temp-color ? convert($temp-color) : #0066CC

//navbar color
$nav-color-1 = convert(hexo-config('navbar.color.left') + hexo-config('navbar.color.transparency'))
$nav-color-2 = convert(hexo-config('navbar.color.right') + hexo-config('navbar.color.transparency'))
$nav-color-bg = linear-gradient(120deg, $nav-color-1 0%, $nav-color-2 100%)

// ========================================================================================
// light mode color
// ========================================================================================
$background-color = #fff
$background-color-transparent = rgba(255, 255, 255, 0.6)
$background-color-transparent-80 = rgba(255, 255, 255, 0.8)
$background-color-transparent-40 = rgba(255, 255, 255, 0.4)
$background-color-transparent-15 = rgba(255, 255, 255, 0.15)
$second-background-color = darken($background-color, 2%)
$third-background-color = darken($background-color, 3%)
$third-background-color-transparent = rgba(241, 241, 241, 0.6)
$default-text-color = #373D3F
$invert-text-color = #bebec6
$first-text-color = darken($default-text-color, 10%)
$second-text-color = darken($default-text-color, 5%)
$third-text-color = lighten($default-text-color, 20%)
$fourth-text-color = lighten($default-text-color, 90%)
$border-color = rgba(0, 0, 0, 0.08)
$selection-color = lighten($primary-color, 10%)
$shadow-color-1 = rgba(0, 0, 0, 0.08)
$shadow-color-2 = rgba(0, 0, 0, 0.05)
$shadow-hover-color = rgba(0, 0, 0, 0.28)
$scrollbar-color = #C1C1C1
$scrollbar-color-hover = #A1A1A1
$scroll-bar-bg-color = #FAFAFA
$link-color = darken($default-text-color, 10%)
$copyright-info-color = #CC0033
$avatar-background-color = #0066CC
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
$archive-timeline-last-child-color = linear-gradient(to bottom, rgba(232,232,232, 1) 60%, rgba(0,0,0, 0) 100%) 1 100%

$note-blue-title-bg = #D6F7FB
$note-red-title-bg = #FDE9E9
$note-green-title-bg = #E9FDE9
$note-yellow-title-bg = #FDF9E9
$note-purple-title-bg = #F9E9FD
$note-gray-title-bg = #F9F9F9
$note-black-title-bg = #E9E9E9
$note-cyan-title-bg = #E9FDF9
$note-type-title-bg = #fdf3e9

$home-banner-text-color = convert(hexo-config('home_banner.text_color.light'))
$home-banner-icons-container-border-color = rgba(255, 255, 255, 0.35)
$home-banner-icons-container-background-color = rgba(255, 255, 255, 0.3)


// ========================================================================================
// dark mode color
// ========================================================================================
$dark-primary-color = $primary-color
$dark-background-color = #202124
$dark-background-color-transparent = rgba(32, 33, 36, 0.4)
$dark-background-color-transparent-80 = rgba(32, 33, 36, 0.8)
$dark-background-color-transparent-40 = rgba(32, 33, 36, 0.4)
$dark-background-color-transparent-15 = rgba(32, 33, 36, 0.15)
$dark-second-background-color = lighten($dark-background-color, 2%)
$dark-third-background-color = lighten($dark-background-color, 4.5%)
$dark-third-background-color-transparent = rgba(32, 33, 36, 0.6)
$dark-default-text-color = #bebec6
$dark-invert-text-color = #373D3F
$dark-first-text-color = lighten($dark-default-text-color, 30%)
$dark-second-text-color = lighten($dark-default-text-color, 20%)
$dark-third-text-color = darken($dark-default-text-color, 20%)
$dark-fourth-text-color = darken($dark-default-text-color, 80%)
$dark-border-color = rgba(255, 255, 255, 0.08)
$dark-selection-color = $selection-color
$dark-shadow-color-1 = rgba(255, 255, 255, 0.08)
$dark-shadow-color-2 = rgba(255, 255, 255, 0.05)
$dark-shadow-hover-color = rgba(69, 69, 69, 0.28)
$dark-scrollbar-color = #898989
$dark-scrollbar-color-hover = #A1A1A1;  
$dark-scroll-bar-bg-color = lighten($dark-background-color, 5%)
$dark-link-color = lighten($dark-default-text-color, 10%)
$dark-copyright-info-color = darken($copyright-info-color, 20%)
$dark-avatar-background-color = darken($avatar-background-color, 10%)
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
$dark-archive-timeline-last-child-color = linear-gradient(to bottom, rgba(50,50,50,1) 60%, rgba(255,255,255, 0) 100%) 1 100%

$dark-note-blue-title-bg = #1e3e46
$dark-note-red-title-bg = #4e1e1e
$dark-note-green-title-bg = #1e4e1e
$dark-note-yellow-title-bg = #4e4e1e
$dark-note-cyan-title-bg = #1e4e4e
$dark-note-purple-title-bg = #4e1e4e
$dark-note-gray-title-bg = #4e4e4e
$dark-note-black-title-bg = #1e1e1e
$dark-note-type-title-bg = #4e3a1e

$home-banner-text-color-dark = convert(hexo-config('home_banner.text_color.dark'))
$home-banner-icons-container-border-color-dark = rgba(197, 197, 197, 0.35)
$home-banner-icons-container-background-color-dark = rgba(197, 197, 197, 0.3)


// ========================================================================================
// font
// ========================================================================================

if hexo-config('global.fonts.chinese.enable') {
  $temp-chinese-font-family = hexo-config('global.fonts.chinese.family')
  $chinese-font-family = $temp-chinese-font-family ? $temp-chinese-font-family : 'Noto Sans SC'
} else {
  $chinese-font-family = 'Noto Sans SC', sans-serif
}

if hexo-config('global.fonts.english.enable') {
  $temp-english-font-family = hexo-config('global.fonts.english.family')
  $english-font-family = $temp-english-font-family ? $temp-english-font-family : 'Satoshi-Variable'
} else {
  $english-font-family = 'Satoshi-Variable', sans-serif
}

$default-font-family = Satoshi-Variable, Noto Sans SC, -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial
$default-font-size = 16px
$temp-default-article-font-size = hexo-config('articles.style.font_size')
$temp-default-line-height = hexo-config('articles.style.line_height')
$default-article-font-size = $temp-default-article-font-size ? convert($temp-default-article-font-size) : 16px
$default-line-height = $temp-default-line-height ? $temp-default-line-height : 1.5
$default-font-weight = 450

// ========================================================================================
//  light/dark mode color
// ========================================================================================
root-color(mode) {
  --background-color mode == 'light' ? $background-color : $dark-background-color
  --background-color-transparent mode == 'light' ? $background-color-transparent : $dark-background-color-transparent
  --background-color-transparent-15 mode == 'light' ? $background-color-transparent-15 : $dark-background-color-transparent-15
  --background-color-transparent-40 mode == 'light' ? $background-color-transparent-40 : $dark-background-color-transparent-40
  --background-color-transparent-80 mode == 'light' ? $background-color-transparent-80 : $dark-background-color-transparent-80
  --second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
  --third-background-color mode == 'light' ? $third-background-color : $dark-third-background-color
  --third-background-color-transparent mode == 'light' ? $third-background-color-transparent : $dark-third-background-color-transparent
  --primary-color mode == 'light' ? $primary-color : $dark-primary-color
  --first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
  --second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
  --third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color
  --fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color
  --default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color
  --invert-text-color mode == 'light' ? $invert-text-color : $dark-invert-text-color
  --border-color mode == 'light' ? $border-color : $dark-border-color
  --selection-color mode == 'light' ? $selection-color : $dark-selection-color
  --shadow-color-1 mode == 'light' ? $shadow-color-1 : $dark-shadow-color-1
  --shadow-color-2 mode == 'light' ? $shadow-color-2 : $dark-shadow-color-2
  --shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
  --scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
  --scrollbar-color-hover mode == 'light' ? $scrollbar-color-hover : $dark-scrollbar-color-hover
  --scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color
  --link-color mode == 'light' ? $link-color : $dark-link-color
  --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
  --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
  --pjax-progress-bar-color : mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
  --archive-timeline-last-child-color : mode == 'light' ? $archive-timeline-last-child-color : $dark-archive-timeline-last-child-color
  
  --note-blue-title-bg : mode == 'light' ? $note-blue-title-bg : $dark-note-blue-title-bg
  --note-red-title-bg : mode == 'light' ? $note-red-title-bg : $dark-note-red-title-bg
  --note-cyan-title-bg : mode == 'light' ? $note-cyan-title-bg : $dark-note-cyan-title-bg
  --note-green-title-bg : mode == 'light' ? $note-green-title-bg : $dark-note-green-title-bg
  --note-yellow-title-bg : mode == 'light' ? $note-yellow-title-bg : $dark-note-yellow-title-bg
  --note-gray-title-bg : mode == 'light' ? $note-gray-title-bg : $dark-note-gray-title-bg
  --note-type-title-bg : mode == 'light' ? $note-type-title-bg : $dark-note-type-title-bg
  --note-black-title-bg : mode == 'light' ? $note-black-title-bg : $dark-note-black-title-bg
  --note-purple-title-bg : mode == 'light' ? $note-purple-title-bg : $dark-note-purple-title-bg

  --home-banner-text-color mode == 'light' ? $home-banner-text-color : $home-banner-text-color-dark
  --home-banner-icons-container-border-color mode == 'light' ? $home-banner-icons-container-border-color : $home-banner-icons-container-border-color-dark
  --home-banner-icons-container-background-color mode == 'light' ? $home-banner-icons-container-background-color : $home-banner-icons-container-background-color-dark

  --redefine-box-shadow : var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px
  --redefine-box-shadow-hover : var(--shadow-color-2) 0px 6px 24px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset
  --redefine-box-shadow-flat : var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px
  --redefine-box-shadow-flat-hover : var(--shadow-color-2) 0px 1px 4px 0px, var(--shadow-color-1) 0px 0px 0px 1px, var(--shadow-color-1) 0px 0px 0px 1px inset

  --mermaid-theme : mode == 'light' ? $mermaid-theme : $dark-mermaid-theme

}


:root {
  root-color('light')
}

@media (prefers-color-scheme light) {
  :root {
    root-color('light')
  }
}

@media (prefers-color-scheme dark) {
  :root {
    root-color('dark')
  }
}


.light-mode {
  root-color('light')
}


.dark-mode {
  root-color('dark')
}
